<template>
  <form @submit.prevent="handleRun" class="form-section">
    <div class="form-container">
      <div class="show_v" v-loading="loading" element-loading-text="智能算法运算中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="double-container">
          <div class="inputs-container">
            <div class="title_right">
              <img referrerpolicy="no-referrer" src="../assets/img/module4/part1/image1.png" class="image_1">
              <span class="text1">选择评估模型</span>
            </div>
            <div class="form-item">
              <!-- <label style="width: 150px;">选择评估模型</label> -->
              <div class="checkbox-group">
                <label class="checkbox-item">
                  <input type="checkbox" v-model="selectedModels.event" checked>
                  <span>EVENT模型</span>
                </label>
                <label class="checkbox-item">
                  <input type="checkbox" v-model="selectedModels.fault" checked>
                  <span>位置误差概率模型</span>
                </label>
                <label class="checkbox-item">
                  <input type="checkbox" v-model="selectedModels.reich">
                  <span>REICH模型</span>
                </label>
                <label class="checkbox-item">
                  <input type="checkbox" v-model="selectedModels.cross">
                  <span>交叉航路模型</span>
                </label>
              </div>
            </div>
          </div>
          <div class="form-item1">
            <button type="submit" @click="handleRun" class="button2" :disabled="!isFormValid">运行</button>
            <button type="button" @click="resetForm" class="button1">重置</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
import axios from 'axios';
import ManagementPlatform from '@/components/plat_table.vue';

const baseApi = process.env.NODE_ENV === 'production'
  //? process.env.VUE_APP_REMOTE_API
  ? '/api'  // 使用代理路径
  : process.env.VUE_APP_REMOTE_API_MODULE4;

export default {
  name: 'FormComponent',
  components: {
    ManagementPlatform,
  },
  props: {
  },
  data() {
    return {
      loading: false,
      formParams: {
        collisionWeight: '',
        faultWeight: '',
        maxSpeed: '',
        maxAcceleration: ''
      },
      selectedModels: {
        event: true,
        fault: true,
        reich: false,
        cross: false
      },
    };
  },
  computed: {
    isFormValid() {
      // 只要有一个模型被选中即可
      return Object.values(this.selectedModels).some(value => value === true)
    }
  },
  methods: {
    async handleRun() {
      if (!this.isFormValid) {
        this.$message.warning('请至少选择一个评估模型')
        return
      }

      this.loading = true
      try {
        await new Promise(resolve => setTimeout(resolve, 1000))
        // 将选中的模型信息传给后端
        this.$emit('run-clicked', {
          selectedModels: this.selectedModels
        })
      } finally {
        this.loading = false
      }
    },

    resetForm() {
      this.selectedModels = {
        event: true,
        fault: true,
        reich: false,
        cross: false
      }
    }
  }
}
</script>

<style scoped>
.form-section {
  width: 100%;
  height: 100%
}

.form-container {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  border: 0.0625rem solid;
  margin-top: 0.375rem;
  flex-direction: column;
  margin-left: 1%;
  position: relative;
}

.show_v {
  height: 100%;
  width: 100%;
}

.double-container {
  display: flex;
  /* flex-direction: column; */
  height: 100%;
  width: 100%;
}

.inputs-container {
  display: flex;
  flex-direction: column;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  width: 65%;
  height: 100%;

}

.form-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 5.07%;
  justify-content: flex-start;
  margin: 1.75rem 0 0 2rem;
  align-items: center;
  position: relative;
  /* 添加相对定位 */
}

/* 新增 label 容器样式 */
.label-container {
  width: 140px;
  /* 固定宽度 */
  margin-right: 1.25rem;
  display: flex;
  justify-content: flex-end;
  /* 文字靠右对齐 */
}

.form-item label {
  font-size: 1rem;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  white-space: nowrap;
  line-height: 1.25rem;
  color: rgba(255, 255, 255, 1);
}

.select-right {
  position: relative;
  height: 2.5rem;
  width: 10rem;
  font-size: 0.875rem;
  background-color: rgba(0, 0, 0, 0.4);
  border: none;
  border-radius: 0.25rem;
  color: #ffffff;
  padding-left: 1.2rem;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  box-sizing: border-box;
}

.select-right::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.unit {
  color: #ffffff;
  margin-left: 0.5rem;
  font-family: AlibabaPuHuiTi_2_65_Medium;
}

.button1:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.select-right::-webkit-inner-spin-button,
.select-right::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.select-right[type=number] {
  -moz-appearance: textfield;
}

.form-item1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  bottom: 13%;
  height: 4%;
  /* font-size: 4vh; */
  color: #ffffff;
  position: absolute;
  left: 45%;
  transform: translateX(-50%);
}

.button1 {
  background: url(../assets/img/module4/part1/button1.png) no-repeat center center, url(../assets/img/module4/part1/table_b.png) no-repeat center center;
  background-size: contain, 50%;
  color: #ffffff;
  border: none;
  padding: 0.4vh 4.7vh;
  margin-left: 4%;
  font-size: 1rem;
  transition: background-color 0.3s, transform 0.3s;
  white-space: nowrap;
}

.button1:hover {
  background: url(../assets/img/module4/part1/button2.png) no-repeat center center;
  padding: 0.4vh 4.6vh;
  background-size: contain, 50%;
  transform: scale(1.05);
}

.button1:active {
  background: url(../assets/img/module4/part1/button2.png) no-repeat center center;
  background-size: contain, 50%;
  padding: 0.4vh 2.6vh;
}

.button2 {
  background: url(../assets/img/module4/part1/button2.png) no-repeat center center, url(../assets/img/module4/part1/table_b.png) no-repeat center center;
  background-size: contain, 50%;
  color: #ffffff;
  border: none;
  padding: 0.4vh 4.7vh;
  margin-left: 4%;
  font-size: 1rem;
  transition: background-color 0.3s, transform 0.3s;
  white-space: nowrap;
}

.button2:hover {
  background: url(../assets/img/module4/part1/button2.png) no-repeat center center;
  padding: 0.4vh 4.6vh;
  background-size: contain, 50%;
  transform: scale(1.05);
}

.button2:active {
  background: url(../assets/img/module4/part1/button2.png) no-repeat center center;
  background-size: contain, 50%;
  padding: 0.4vh 2.6vh;
}


.title_right {
  width: 100%;
  height: 1.5625rem;
  margin: 1.4rem 0 1.5rem 1.4375rem;
}

.image_1 {
  width: 1.5625rem;
  height: 0.9375rem;
  margin-top: 0.3125rem;
}

.text1 {
  width: 18.875rem;
  height: 1.5625rem;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 1.125rem;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 1.5625rem;
  margin-left: 0.5625rem;
}

/* 多选框相关 */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: #1e2a3a; /* 深蓝背景卡片 */
  border-radius: 12px;
  border: 1px solid #2e3c50;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.checkbox-item:hover {
  background-color: #27384d;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}

.checkbox-item input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: #00aaff; /* 复选框颜色可调 */
  cursor: pointer;
}

</style>